---
type: tutorial
title: Escribe tu primera línea de Astro
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Realiza las primeras modificaciones en la página de inicio de tu proyecto tutorial
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Realizar la primera edición de tu nuevo sitio web
</PreCheck>

## Edita tu página de inicio

<Steps>
1. En tu editor de código, navega en el panel de archivos del Explorador hasta `src/pages/index.astro` y abre el contenido del archivo en una pestaña editable.

    El contenido de tu archivo `index.astro` debe tener este aspecto:

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="es">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. Edita el contenido de tu página `<body>`.

    Escribe en el editor para cambiar el texto del encabezado de tu página y guarda el cambio.

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>Mi sitio Astro</h1>
    </body>
    ```

3. Revisa la vista previa del navegador y deberías ver el contenido de tu página actualizado con el nuevo texto.
</Steps>

¡Enhorabuena! Ya eres desarrollador de Astro.

El resto de esta unidad te preparará para el éxito con el control de versiones y un sitio web publicado del que puedas presumir.



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo hacer cambios y verlos en el navegador.
- [ ] ¡Soy un desarrollador de Astro!
</Checklist>
</Box>
